<template>
  <div id="app">
    <div class="app-header">头部</div>
    <div class="app-main">
      <router-view></router-view>
    </div>
    <div class="app-footer">
      <!--  
       tag="a"  指定router-link组件解析后标签(默认是a标签)

       to="/"   表示目标路由的链接 => 参数的值可以是字符串/对象(动态绑定)
          参数是字符串(只能传路由地址)   to="/list"

          参数是对象(可以传更多数据)
          :to="{path,name,params,query}" 
          path  对应路径跳转
          name  对应命名路由跳转

          params 动态路径参数
          query  query数据

          :to="{path:'/list'}"    //对应路径跳转
          :to="{name:'list'}"     // 对应命名路由跳转

        active-class  设置链接激活时使用的 CSS 类名 (默认类型:router-link-active)
              => / 可以被所有的子路由激活 (/   /list  /list/a)
              /list/a   解析可以匹配三个  /   /list    /list/a

        exact   精确匹配模式 (只能匹配自己)
             /list/a => 只能匹配 /list/a   

        exact-active-class  配置当链接被精确匹配的时候应该激活的 class
          
     -->
      <ul class="nav">
        <router-link tag="li" exact :class="{active:$route.path== '/'}" active-class="active" to="/home">首页</router-link>
        <router-link tag="li" exact active-class="active" to="/list">列表</router-link>
        <router-link tag="li" exact active-class="active" to="/car">购物车</router-link>
        <router-link tag="li" exact active-class="active" to="/mine">我的</router-link>
      </ul>
    </div>


  </div>
</template>


<style lang="scss">
//  lang="scss"当前style内的样式 会用scss语法解析
/* style中如果不添加scoped  => 默认是全局样式 对所有的页面生效 */
/* style中如果添加scoped  => 默认是局部样式 对当前页面生效 (1. 给当前template内的元素添加唯一的自定义属性  2. 每个css属性后 都会添加唯一属性做限制) */
html,
body,
#app {
  width: 100%;
  height: 100%;
}

body {
  font-size: 0.24rem;
}

#app {
  display: flex;
  flex-direction: column;

  .app-header,
  .app-footer {
    height: 1rem;
    line-height: 1rem;
    background-color: grey;
    color: #fff;
  }

  .app-header {
    text-align: center;
  }

  .app-main {
    flex: 1;
    overflow-y: auto;
  }

  .app-footer {
    .nav {
      text-align: center;
      display: flex;

      li {
        flex: 1;
      }
    }
  }

}

.active{
  background-color: pink;
  color: #fff;
}
</style>
